<!--  -->
<template>
<div class='desc-page'>
  <div class="desc-box">
    <van-field
      v-model="content"
      rows="5"
      autosize
      maxlength="500"
      type="textarea"
      show-word-limit
      @input="textChange"
      required
      placeholder="请尽可能详细的描述你的问题，并提供网页链接、截图等信息"
    />
  </div>
  
  <div class="img-list flex">
    <template v-for="(val, index) in imgs">
      <div class="identity-img" :key="index">
        <div class="photoshow flex" >
          <img :src="val"  />
          <span class="iconfont icon-all_filldelete" @click="removeImg_1(index)"></span>
        </div>
      </div>
      
    </template>
    <div class="identity-img" >
      <van-uploader  :disabled="imgs.length >= 5" :after-read="multipleMethod_1" multiple>
        <div class="photoshow flex-a-c flex-j-c">
          <div class="crucifix" ></div>
        </div>
      </van-uploader>
    </div>
  </div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { Toast } from "vant";
export default {
name:'',
//import引入的组件需要注入到对象中才能使用
components: {},
props:{
  content:{
    type:String,
    default:''
  },
  imgs:{
    type:Array,
    default:[]
  }
},
data() {
return {
  fileList4:[],
  fileList3:[],
  uploadUrl:'',
  upNumMaxOther:0
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  // 判断多图上传，循环onRead_1方法
  multipleMethod_1(e, flag) {
    if (e && e.length) {
      for (let i = 0; i < e.length; i++) {
        this.onRead_2(e[i], flag);
      }
    } else {
      this.onRead_2(e, flag);
    }
  },
  textChange(event) {
    this.$emit('update:content', event)
  },
  removeImg_1(delIndex) {
    this.fileList3.splice(delIndex, 1);
    this.imgs.splice(delIndex, 1);
    this.upNumMaxOther = this.fileList3.length;
    this.$emit('update:imgs', this.imgs)
  },
  // vant 多其他图片上传
  onRead_2(e, flag) {
      var That = this;
      let fd = new FormData();
      if (this.upNumMaxOther == 5 || this.upNumMaxOther >= 5) {
        this.$toast('图片数量已达到上限')
        return false;
      }
      if (flag === true) {
        fd.append("file", e);
      } else {
        fd.append("file", e.file); // 第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
      }
      fd.append("attach", "upload");

      // 添加加载提示
      Toast.loading({
        message: " ",
        forbidClick: true
      });
      axios
        .post(this.uploadUrl, fd, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(response => {
          var responseData = response.data;
          if (responseData.result == 1) {
            That.upNumMaxOther++;
            That.imgs.push(responseData.data.img_url);
            if (flag === true) {
              // That.imgs.push(URL.createObjectURL(e));
              That.fileList3.push(e)
            } else {
              That.fileList3.push(e.file)
              // That.imgs.push(URL.createObjectURL(e.file));
            }
            this.$emit('update:imgs', That.imgs)
            Toast.clear();
          } else {
            Toast(responseData.msg);
            Toast.clear();
          }
        })
        .catch(error => {
          console.log(error);
          Toast.clear();
        });
  },
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {
  this.uploadUrl = this.fun.getRealUrl("upload.uploadPic", {});
}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
  .desc-page {
    background: #FFFFFF;
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    padding:0.9375rem 0.75rem 0.75rem 0.75rem;
    margin:0.625rem 0 0 0;
    .desc-box {
      padding:0 0 0.3125rem 0;
    }
    .img-list {
      border-top: 0.0625rem solid #F0F0F1;
      flex-wrap: wrap;
      grid-gap: 0.625rem;
      .photoshow {
        width: 6.25rem;
        height: 6.25rem;
        background: #F8F8F8;
        border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
        img {
          width: 6.25rem;
          height: 6.25rem;
          border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
        }
        .icon-all_filldelete {
          color:#A0A1A7;
          position: absolute;
          top: 0.6rem;
          right: -0.75rem;
          transform: translate(-50%,-50%);
          z-index: 5;
          width:0.9375rem;
          height: 0.9375rem;
          // background-color: #A0A1A7;
          border-radius: 50%;
        }
      }
      .identity-img {
        position: relative;
        padding:0.75rem 0 0 0;
        
        .crucifix {
          /* 十字架样式 */
          width: 24px ;
          height: 3px;
          background: #D6D6DC;
          border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
          position: relative;

          &::after {
            content: "";
            width: 1.5rem ;
            height: 0.1875rem;
            background: #D6D6DC;
            border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
            position: absolute;
            transform: rotate(-90deg);
            left: 0;
          }
        }
      }
    }
  }
</style>